<template>

    <!-- 
        Vue3 支持碎片（Fargment），可以在组件中拥有多个根节点，这种特性可以减少很多组件之间的div包裹元素。
        Vue3 唯一真正的不同在于数据获取，Vue3 的反应数据（Reactive Data）是包含在一个反应状态（Reactive State）变量中，所以我们需要访问这个反应状态来获取数据值。
        Vue2 使用选项类型API（Options API），Vue3 使用合成类型API（Composition API）。
        合成类型API让我们用方法funciton分割，相比于合成类型API使用属性分组，这样会使代码更加简洁和整洁。
     -->

    <div id="app">

        
        <!--  -->
        <van-notice-bar
            left-icon="volume-o"
            text="欢迎来到嘉兴市科技馆。嘉兴市科技馆于1997年9月对公众正式开放。科技馆占地面积9900平方米，建筑面积6700平方米，其中展厅建筑面积2400平方米。科技馆性质为纯公益性事业单位，人员定编15人。科室设置为展览教育科、公众教育科、青少年活动科、展品研发科以及办公室等。"
        />
        <!--  -->
        <van-row>
            <van-col :span='span?8:24'>
                <div class="app_one">
                    <div class="app_one_title">
                        <p>标语</p>
                        <span @click="change(1,data.text1)">修改</span>
                    </div>
                    <div class="app_one_content">{{data.text1}}</div>
                </div>
            </van-col>
            <van-col :span='span?8:24'>
                <div class="app_one">
                    <div class="app_one_title">
                        <p>人口基数</p>
                        <span @click="change(2,data.text2)">修改</span>
                    </div>
                    <div class="app_one_content">{{data.text2}}</div>
                </div>
            </van-col>
            <van-col :span='span?8:24'>
                <div class="app_one">
                    <div class="app_one_title">
                        <p>报警阀值</p>
                        <span @click="change(3,data.text3)">修改</span>
                    </div>
                    <div class="app_one_content">{{data.text3}}</div>
                </div>
            </van-col>
        </van-row>
        <!--  -->
        <van-row>
            <van-col span="24">
                <div class="app_two">
                    <div class="app_two_left">
                        <p @click="openDate('start')">{{datetime.startTime}}</p>
                        至
                        <p @click="openDate('end')">{{datetime.endTime}}</p>
                        <span @click="search">搜索</span>
                    </div>
                    <van-button size="small" @click="createPicture" type="primary">生成图片</van-button>
                </div>
            </van-col>
        </van-row>
        <!--  -->
        <div ref="html2canvas1">
            <van-row>
                <van-col :span='span?12:24'>
                    <div class="app_three">
                        <div class="app_three_title">
                            <p>客流量</p>
                            <span @click="download1">下载图片</span>
                        </div>
                        <div class="app_three_content">
                            <histogram ref="histogram1" name="客流量" id="echarts1" :data="mainData.data1"></histogram>
                        </div>
                    </div>
                </van-col>
                <van-col :span='span?6:12'>
                    <div class="app_three">
                        <div class="app_three_title">
                            <p>当天客流量</p>
                            <span @click="today">刷新</span>
                        </div>
                        <div class="app_three_content">
                            {{mainData.num1}}
                        </div>
                    </div>
                </van-col>
                <van-col :span='span?6:12'>
                    <div class="app_three">
                        <div class="app_three_title">
                            <p>累计客流量</p>
                            <span @click="history">刷新</span>
                        </div>
                        <div class="app_three_content">
                            {{mainData.num2}}
                        </div>
                    </div>
                </van-col>
            </van-row>
            <!--  -->
            <van-row>
                <van-col :span='span?12:24'>
                    <div class="app_four">
                        <div class="app_three_title">
                            <p>人脸识别年龄区间</p>
                            <span @click="download2">下载图片</span>
                        </div>
                        <div class="app_three_content">
                            <histogram ref="histogram2" name="人脸识别年龄区间" id="echarts2" :data="mainData.data2"></histogram>
                        </div>
                    </div>
                </van-col>
                <van-col :span='span?12:24'>
                    <div class="app_four">
                        <div class="app_three_title">
                            <p>人脸识别年龄比例</p>
                            <span @click="download3">下载图片</span>
                        </div>
                        <div class="app_three_content">
                            <pie ref="pie" name="人脸识别年龄比例" id="echarts3" :data="mainData.data3"></pie>
                        </div>
                    </div>
                </van-col>
            </van-row>
            <!--  -->
            <van-row>
                <van-col span="24">
                    <div class="bottomTitle">Copyright © 2020.10 博物文化技术支持</div>
                </van-col>
            </van-row>
        </div>
        <!--  -->
        <modal
            :title="data.title"
            :name="data.name"
            :text="data.text"
            :show="data.show"
            @closeshow="bindcloseshow"
            @submit="onsubmit"
        ></modal>
        <!--  -->
        <van-popup 
            position="bottom" 
            :round="true" 
            @click-overlay="datetime.popupShow=false" 
            :show="datetime.popupShow" >
            <van-datetime-picker
                @cancel="datetime.popupShow=false"
                @confirm="dateTimeConfirm"
                type="date"
                v-model="datetime.date"
                title="选择年月日"
                :min-date="datetime.minDate"
                :max-date="datetime.maxDate"/>
        </van-popup>
        <!--  -->
        
    </div>
</template>

<script lang="ts" src="./demo2.ts"></script>
<style lang="less" scoped src="./demo2.less"></style>